<script setup>
import { ref,onMounted } from 'vue'
import { getUsers } from '../api/user.js'

const users = ref([
  {
    id: '',
    name: '',
    email: ''
  }
])
const searchUser=ref({
  name:'',
  email:'',
  id:''
})
let page = ref(1)
let total = ref(0)
let pageSize = ref(5)

const getData=async()=>{
  const result=await getUsers(page.value,pageSize.value,searchUser.value)

  users.value=result.data.page
  total.value=result.data.total
}
const last=()=>{
  if(page.value<=1) return
  page.value--
  getData()
}
const next= ()=>{
  if((page.value*pageSize.value)>=total.value) return
  page.value++
  getData()
}
onMounted(()=>{
  getData()
})
</script>

<template>
    <el-form :inline="true" v-model="searchUser" >
        <el-form-item label="用户名">
          <el-input v-model="searchUser.username"></el-input>
        </el-form-item>
        <el-form-item label="id">
          <el-input v-model="searchUser.id"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="searchUser.email"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getData">查询</el-button>
        </el-form-item>
    </el-form>
  <el-table :data="users">
    <el-table-column prop="id" label="ID" />
    <el-table-column prop="name" label="Name"/>
    <el-table-column prop="email" label="Email"/>
  </el-table>

  <div class="footer">
    <el-button @click="last">上一页</el-button>
    <span>{{ page }}/{{ (total/pageSize) }}</span>
    <el-button @click="next">下一页</el-button>
  </div>
  
</template>

<style scoped>
.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
</style>
